<template>
  <!-- 导入数据 -->
  <div class="importData">
    <div class="button-container" style="padding:0">
      <Button type="primary" @click="update">修改</Button>
      <Button type="danger" @click="delet">删除</Button>
      <Button type="primary" @click="downloadTemplate">下载模板</Button>
      <el-upload
        class="upload-demo"
        :headers="headers"
        action="/call-center/api/v1/callBackTask/upload"
        :on-success="onSuccess"
        :on-error="()=>{loading = false}"
        :before-upload="beforeUpload"
      >
        <Button type="primary" :loading="loading">导入数据</Button>
      </el-upload>
      <i></i>
      <Button type="primary" :loading="nextLoading" @click="next">下一步</Button>
    </div>
    <div class="table-list-box">
      <el-table
        row-key="t_index"
        height="calc(100vh - 200px)"
        :data="paginationData.data"
        no-request
        header-row-class-name="table-list-header"
        :table-config="tableConfig"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名"></el-table-column>
        <el-table-column prop="customerPhone" label="联系电话"></el-table-column>
        <el-table-column prop="remarks1" label="备注1"></el-table-column>
        <el-table-column prop="remarks2" label="备注2"></el-table-column>
        <el-table-column prop="remarks3" label="备注3"></el-table-column>
        <el-table-column prop="remarks4" label="备注4"></el-table-column>
        <el-table-column prop="remarks5" label="备注5"></el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-if="paginationData.data&&paginationData.data.length"
          :current-page="paginationData.page"
          :page-sizes="[10,20,50,100, 200, 300, 400]"
          :page-size="paginationData.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <ImportEdit ref="importEdit" @confirm="updateConfrim"></ImportEdit>
  </div>
</template>
<script>
import Button from '@/components/Button'
import ImportEdit from './importChild/ImportEdit'
import { mapState, mapMutations } from 'vuex'
import { callBackTaskAddBatchObj, callBackTaskDownload } from '@/api/callBackTask'
import pagination from '@/utils/pagination'
import { getToken } from '@/utils/auth'
import { downFileByStream } from '@/utils/index'
export default {
  name: 'ImportData',
  components: {
    Button,
    ImportEdit
  },
  data() {
    return {
      tableData: [],
      loading: false,
      nextLoading: false,
      headers: {},
      selectedAry: [],
      paginationData: {},
      tableConfig: {
        interfacePath: '',
        pageFlag: false,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: []
      }
    }
  },
  computed: {
    ...mapState({
      taskId: function(state) {
        return state.taskForm.form[this.$route.query.id] ? state.taskForm.form[this.$route.query.id].basic.id : ''
      },
      step: function(state) {
        return state.taskForm.form[this.$route.query.id] ? state.taskForm.form[this.$route.query.id].step : 1
      }
    })
  },
  mounted() {
    this.headers['token'] = getToken()
    this.headers['Authorization'] = `Bearer ${getToken()}`
  },
  methods: {
    ...mapMutations({
      SET_STEP: 'taskForm/SET_STEP'
    }),
    downloadTemplate() {
      callBackTaskDownload().then(res => {
        if (res.statusText === 'OK') {
          downFileByStream(res.data, '数据导入模板.xlsx')
        }
      })
    },
    update() {
      if (this.selectedAry.length !== 1) {
        return this.$message.info('请选择一条要编辑的数据')
      }
      this.$refs.importEdit.openDailog(this.selectedAry[0])
    },
    // 确定修改
    updateConfrim(data) {
      var ary = JSON.parse(JSON.stringify(this.tableData))
      for (const i in ary) {
        if (ary[i].t_index === data.t_index) {
          ary[i] = data
          break
        }
      }
      this.$message({
        message: '修改成功!',
        type: 'success'
      })
      this.tableData = ary
      this.paginationData = pagination(this.tableData, this.paginationData.page, this.paginationData.size)
    },
    // 删除
    delet() {
      if (this.selectedAry.length === 0) {
        return this.$message.info('请选择选择要删除的数据')
      }
      this.$msgbox({
        title: '确认删除',
        showCancelButton: true,
        type: 'warning',
        message: '确定删除所选择数据？'
      })
        .then(() => {
          var ary = this.tableData.filter(e => {
            if (
              this.selectedAry.some(z => {
                return z.t_index === e.t_index
              })
            ) {
              return false
            } else {
              return true
            }
          })
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
          this.tableData = ary
          this.paginationData = pagination(this.tableData, this.paginationData.page, this.paginationData.size)
          this.selectedAry = []
        })
        .catch(e => e)
    },
    // 下一步
    next() {
      if (this.tableData && this.tableData.length === 0) {
        return this.$message.info('请导入数据！')
      }
      this.nextLoading = true
      callBackTaskAddBatchObj({
        objectMethod: 0,
        callBackObjectImportDTOList: this.tableData
      }).then(res => {
        this.nextLoading = false
        this.SET_STEP({ id: this.$route.query.id, step: this.step + 1 })
      }).catch(er => {
        this.nextLoading = false
      })
    },
    // 数据选中
    selectionChange(val) {
      this.selectedAry = val
    },
    beforeUpload() {
      this.loading = true
    },
    // 上传成功，返回列表数据
    onSuccess(res) {
      this.loading = false
      if (res.success === 1) {
        res.data.forEach((e, i) => {
          e.t_index = i
          e.taskId = this.taskId
          e.objectMethod = 0
        })
        this.tableData = res.data
        this.paginationData = pagination(res.data, 1, 10)
      }
    },
    handleSizeChange(val) {
      this.paginationData = pagination(this.tableData, this.paginationData.page, val)
    },
    handleCurrentChange(val) {
      this.paginationData = pagination(this.tableData, val, this.paginationData.size)
    }
  }
}
</script>
<style lang='scss' scope>
.importData .el-upload-list {
  display: none
}
</style>
